import { Meta, Title } from '@storybook/addon-docs/blocks'

import '@reown/appkit-ui/wui-flex'
import '@reown/appkit-ui/wui-grid'
import '@reown/appkit-ui/wui-text'

<Meta title="theme/BorderRadius" />

<Title>Border Radius</Title>

<wui-text variant="lg-regular" color="primary" style={{ marginBottom: '24px' }}>
Visual demonstration of all border radius values in the design system:
</wui-text>

<wui-grid gridTemplateColumns="repeat(4, 1fr)" gap="4">
  {[
    { key: '1', value: '4px' },
    { key: '2', value: '8px' },
    { key: '3', value: '12px' },
    { key: '4', value: '16px' },
    { key: '5', value: '20px' },
    { key: '6', value: '24px' },
    { key: '8', value: '32px' },
    { key: '10', value: '40px' },
    { key: '16', value: '64px' },
    { key: '20', value: '80px' },
    { key: '32', value: '128px' },
    { key: '64', value: '256px' },
    { key: '128', value: '512px' },
    { key: 'round', value: '9999px' }
  ].map(({ key, value }) => (
    <wui-flex
      key={key}
      flexDirection="column"
      alignItems="center"
      gap="3"
      style={{ padding: '16px' }}
    >
      <wui-text variant="sm-medium" color="inverse" align="center">
        --apkt-borderRadius-{key}
      </wui-text>
      <div
        style={{
          width:
            key === 'round' ? '80px' : Math.min(120, Math.max(60, parseInt(value) + 20)) + 'px',
          height:
            key === 'round' ? '80px' : Math.min(120, Math.max(60, parseInt(value) + 20)) + 'px',
          border: '2px dotted var(--apkt-tokens-core-foregroundAccent060)',
          borderRadius: value,
          display: 'flex',
          backgroundColor: 'var(--apkt-tokens-core-foregroundAccent010)',
          alignItems: 'center',
          justifyContent: 'center',
          transition: 'all 0.2s ease'
        }}
      >
        <wui-text variant="xs-regular" color="primary" align="center">
          {value}
        </wui-text>
      </div>
    </wui-flex>

))}
</wui-grid>

<wui-text variant="md-regular" color="fg-200" style={{ marginTop: '32px', lineHeight: '1.5' }}>
**Usage:** Use these border radius tokens with CSS custom properties:<br/>
`border-radius: var(--apkt-borderRadius-4);` → 16px<br/>
`border-radius: var(--apkt-borderRadius-round);` → Fully rounded
</wui-text>

## Border Radius Tokens

```css
--apkt-borderRadius-1: 4px;
--apkt-borderRadius-2: 8px;
--apkt-borderRadius-3: 12px;
--apkt-borderRadius-4: 16px;
--apkt-borderRadius-5: 20px;
--apkt-borderRadius-6: 24px;
--apkt-borderRadius-8: 32px;
--apkt-borderRadius-10: 40px;
--apkt-borderRadius-16: 64px;
--apkt-borderRadius-20: 80px;
--apkt-borderRadius-32: 128px;
--apkt-borderRadius-64: 256px;
--apkt-borderRadius-128: 512px;
--apkt-borderRadius-round: 9999px;
```
